<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>F-Droid swap</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            font-family: "Roboto Light", "Roboto Lt", Helvetica, sans-serif;
            color: #fff;
            background-color: #1c6bbc;
        }

        #swap-icon {
            display: block;
            margin: 1em auto 0 auto;
            width: 25%;
            max-width: 400px;
            height: auto;
        }

        .tick {
            display: block;
            float: right;
            margin-right: 1em;
            width: 30px;
            height: 30px;
        }

        h1 {
            padding: 0 1.5em;
            text-align: center;
            font-size: 1.2em;
            font-weight: normal;
        }

        ol {
            counter-reset: li;
            margin-left: 0;
            margin-bottom: 0;
            padding-left: 0;
        }

        ol > li, #download-from-web {
            padding: 1em 0;
            border-bottom: solid 1px rgba(245, 245, 245, 0.2);
            box-sizing: border-box;
        }

        ol > li:first-child {
            border-top: solid 1px rgba(245, 245, 245, 0.2);
        }

        ol > li:before {
            content: counter(li);
            counter-increment: li;
            font: bold 1.4em Sans-Serif;
            margin-left: 1em;
            margin-right: 0.5em;
        }

        ol > li a {
            font-family: "Roboto", Helvetica, sans-serif;
            font-weight: bold;
            color: #fff;
        }

        #download-from-web {
            padding-left: 2em;
            padding-right: 2em;
        }

    </style>

</head>
<body>

    <img id="swap-icon" src="swap-icon.png" />
    <h1>You're minutes away from having swap success!</h1>
    <ol>
        <li>
            Find a swap
            <img src="swap-tick-done.png" class="tick done" alt="Done"/>
        </li>
        <li>
            <a href="{{CLIENT_URL}}">Download F-Droid</a>
            <img src="swap-tick-not-done.png" class="tick not-done" alt="Not done" />
        </li>
        <li>
            Install F-Droid
            <img src="swap-tick-not-done.png" class="tick not-done" alt="Not done" />
        </li>
        <li>
            <a href="{{REPO_URL}}">Add the swap to F-Droid</a>
            <img src="swap-tick-not-done.png" class="tick not-done" alt="Not done" />
        </li>
        <li>
            Install the apps you want
            <img src="swap-tick-not-done.png" class="tick not-done" alt="Not done" />
        </li>
    </ol>
</body>
</html>
